ebab7d0da53c51438720d60c6e2e467c - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>JSX (JavaScript)</title>

</head>

JSX (JavaScript)

</h1>

</header>

JSX (sometimes referred to as JavaScript XML) is an <a href="XML" title="XML">XML</a>-like extension to the <a href="JavaScript" title="JavaScript">JavaScript</a> language syntax.<a href="#cite_note-:0-1">[1]</a> Initially created by <a href="Meta_Platforms" title="Meta Platforms">Facebook</a> for use with <a href="React_(JavaScript_library)" class="mw-redirect" title="React (JavaScript library)">React</a>, JSX has been adopted by multiple <a href="Web_framework" title="Web framework">web frameworks</a>.<a href="#cite_note-Larsen-2">[2]</a>: 5 <a href="#cite_note-Wieruch-3">[3]</a>: 11 Being a <a href="Syntactic_sugar" title="Syntactic sugar">syntactic sugar</a>, JSX is generally <a href="Transpiler" class="mw-redirect" title="Transpiler">transpiled</a> into nested JavaScript function calls structurally similar to the original JSX.

When used with <a href="TypeScript" title="TypeScript">TypeScript</a>, the file extension is .tsx.<a href="#cite_note-4">[4]</a>

<div class="mw-heading mw-heading2"><h2 id="Markup">Markup</h2></div>

Below is an example of JSX code:

<div class="mw-highlight mw-highlight-lang-jsx mw-content-ltr" dir="ltr"><pre>const App = () => {

return (

<div>

<p>Header</p>

<p>Content</p>

<p>Footer</p>

</div>

);

}

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Nested_elements">Nested elements</h3></div>

Multiple elements on the same level need to be wrapped in a single element such as the <code><div></code> element shown above, a fragment delineated by <code><Fragment></code> or in its shorthand form <code><></code>, or returned as an array.<a href="#cite_note-5">[5]</a><a href="#cite_note-6">[6]</a><a href="#cite_note-Wieruch-3">[3]</a>: 68–69

<div class="mw-heading mw-heading3"><h3 id="Attributes">Attributes</h3></div>

JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component.<a href="#cite_note-7">[7]</a> All attributes will be received by the component as props.

<div class="mw-heading mw-heading3"><h3 id="JavaScript_expressions">JavaScript expressions</h3></div>

JavaScript <a href="Expression_(computer_science)" title="Expression (computer science)">expressions</a> (but not <a href="Statement_(computer_science)" title="Statement (computer science)">statements</a>) can be used inside JSX with curly brackets <code>{}</code>:<a href="#cite_note-Wieruch-3">[3]</a>: 14–16

</pre></div>

The example above will render:

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Conditional_expressions">Conditional expressions</h3></div>

<a href="Conditional_(computer_programming)" title="Conditional (computer programming)">If–else statements</a> cannot be used inside JSX but conditional expressions can be used instead.

The example below will render <code class="mw-highlight mw-highlight-lang-js mw-content-ltr" style="" dir="ltr">{ i === 1 ? 'true' : 'false' }</code> as the string <code>'true'</code> because <code>i</code> is equal to 1.

const i = 1;

return (

<div>

<h1>{ i === 1 ? 'true' : 'false' }</h1>

</div>

);

}

</pre></div>

The above will render:

</div>

</pre></div>

Functions and JSX can be used in conditionals:<a href="#cite_note-Wieruch-3">[3]</a>: 88–90

const sections = [1, 2, 3];

return (

<div>

{sections.map((n, i) => (

/* 'key' is a React-specific attribute for tracking of list items and their changes */

/* Each 'key' must be unique */

Section {n} {i === 0 && <span>(first)</span>}

</div>

))}

</div>

);

}

</pre></div>

The above will render:

<div>Section 1 <span>(first)</span></div>

<div>Section 2</div>

<div>Section 3</div>

</div>

</pre></div>

Code written in JSX requires conversion with a tool such as <a href="Babel_(compiler)" class="mw-redirect" title="Babel (compiler)">Babel</a> before it can be understood by web browsers.<a href="#cite_note-8">[8]</a><a href="#cite_note-Larsen2021-9">[9]</a>: 5 This processing is generally performed during a <a href="Software_build" title="Software build">software build</a> process before the application is <a href="Software_deployment" title="Software deployment">deployed</a>.

<ul><li><a href="ECMAScript_for_XML" title="ECMAScript for XML">ECMAScript for XML</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}

/* end https://en.wikipedia.org/ */

</style><div class="reflist">

/* start https://en.wikipedia.org/ */

.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}

/* end https://en.wikipedia.org/ */

</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://facebook.github.io/jsx/">"Draft: JSX Specification"</a>. JSX. Facebook. Retrieved 7 April 2018.</cite>

</li>

<li id="cite_note-Larsen-2"><a href="#cite_ref-Larsen_2-0">^</a> <cite id="CITEREFLarsen2021" class="citation book cs1">Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode. Manning. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>978-1720043997</bdi>.</cite>

</li>

<li id="cite_note-Wieruch-3">^ <a href="#cite_ref-Wieruch_3-0">a</a> <a href="#cite_ref-Wieruch_3-1">b</a> <a href="#cite_ref-Wieruch_3-2">c</a> <a href="#cite_ref-Wieruch_3-3">d</a> <cite id="CITEREFWieruch2018" class="citation book cs1">Wieruch, Robin (14 September 2018). The Road to React. Leanpub. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>978-1720043997</bdi>.</cite>

</li>

<li id="cite_note-4"><a href="#cite_ref-4">^</a> <cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.typescriptlang.org/docs/handbook/jsx.html">"Documentation - JSX"</a>. www.typescriptlang.org. Retrieved 2025-07-13.</cite>

</li>

<li id="cite_note-5"><a href="#cite_ref-5">^</a> <cite id="CITEREFClark2017" class="citation web cs1">Clark, Andrew (September 26, 2017). <a rel="nofollow" class="external text" href="https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings">"React v16.0§New render return types: fragments and strings"</a>. React Blog.</cite>

</li>

<li id="cite_note-6"><a href="#cite_ref-6">^</a> <cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://reactjs.org/docs/react-component.html#render">"React.Component: render"</a>. React.</cite>

</li>

<li id="cite_note-7"><a href="#cite_ref-7">^</a> <cite id="CITEREFClark2017" class="citation web cs1">Clark, Andrew (September 26, 2017). <a rel="nofollow" class="external text" href="https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes">"React v16.0§Support for custom DOM attributes"</a>. React Blog.</cite>

</li>

<li id="cite_note-8"><a href="#cite_ref-8">^</a> <cite id="CITEREFFischer2017" class="citation book cs1">Fischer, Ludovico (2017-09-06). <a rel="nofollow" class="external text" href="https://books.google.com/books?id=Tg9QDwAAQBAJ">React for Real: Front-End Code, Untangled</a>. Pragmatic Bookshelf. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>9781680504484</bdi>.</cite>

</li>

<li id="cite_note-Larsen2021-9"><a href="#cite_ref-Larsen2021_9-0">^</a> <cite id="CITEREFLarsen2021" class="citation book cs1">Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode. Manning. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>978-1720043997</bdi>.</cite>

</li>

</ol></div></div>

<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>

<ul><li><a rel="nofollow" class="external text" href="https://facebook.github.io/jsx">Official website</a>, Draft: JSX specification</li></ul></div><div><div class="zim-footer">

This article is issued from <a class="external text" title="Last edited on 2025-08-08" href="https://en.wikipedia.org/wiki/?title=JSX_(JavaScript)&oldid=1304839716">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.

</div>

</div></div>

</div>

</main>

</div>

</body></html>